<template>
  <div class="banner">
   <Header>
		<div class="title"><span class="title-span">修改密码</span></div>
		<div class="back" @click="$router.back()"><van-icon name="arrow-left" /></div>
	</Header>
    <van-form @submit="onSubmit" ref="regForm">
<van-field 
    v-model="username"
    name="username"
    label="用户名"
    placeholder="请输入用户名"
    :rules="
    [{required:true,
    message:'请填写手机号'},
    {
      pattern:/^1[3-9]\d{9}$/,
      message:'手机号格式错误'
    
    }]" 
  />

<van-field
  v-model="vercode"
  name="vercode"
  label="短信验证码"
  placeholder="请输入短信验证码"
  clearable
  :rules="
    [{required:true,
    message:'请填写验证码'},
    {
      pattern:/^\d{6}$/,
      message:'验证码格式错误'
    
    }]"
>
  <template #button>
    <van-button
     size="small"
      type="primary"
      class="button-text"
    native-type="button" 
    @click="sendSms"
    :disabled="codeBtnDisabled"
      >
      {{code_text}}
      </van-button>
  </template>
</van-field>

<van-field
 v-model="password"
  type="password"
   label="密码"
   placeholder="密码"
    :rules="
    [{required:true,
    message:'请填写密码'},
    {
      validator:(e)=>/^\w{6,12}$/.test(e),
      message:'密码格式错误'
    
    }]"
    />

    <div>
    <van-button class="footer-text"
    round block type="info" 
    native-type="submit">
    提交
    </van-button>
    
  </div>

</van-form>

</div>
</template>



<script>
import { Icon,Field,Form } from "vant";
import {forget,sendSms} from "../api/user"

export default {
    name:"forget",
    components:{
        [Icon.name]:Icon,
        [Field.name]:Field,
        [Form.name]:Form,
    },
    data() {
        return {
            username: '',
            password: '',
            vercode:'',
            codeBtnDisabled:false,
            code_text:"发送验证码"
        }
    },
    methods:{
       onsubmit(val) {
        console.log('sumbit',val);
        forget(val).then((res)=>{
            console.log(res)
        });
       },
           async sendSms () {
      try {
        let validate_res = await this.$refs.regForm.validate("username");
        this.codeBtnDisabled = true;
        this.code_text = '发送中...'
        sendSms({
          mobile: this.username,
          type:"register",
        }).then((res)=>{
          console.log(res);
          if(res.code == 0) {
            this.$toast(`短信已经发送到手机号${this.username},请注意查收`);
            let count = 10;
            let timer = setInterval(() => {
              count--;
              this.code_text = `${count}s后再获取`;
              if(count<=0) {
                clearInterval(timer);
                this.code_text = `再次发送`;
                this.codeBtnDisabled = false;

              }
            },1000)
          }else {
            this.$toast(res.msg || '发送失败')
            this.codeBtnDisabled = false;
            this.code_text = '再次发送'
          }
      
        }).catch (err=>{
          console.log(err)
          this.$toast(err.msg || '发送失败')
          this.codeBtnDisabled = false;
          this.code_text = '再次发送'
        })
      }catch(e) {

      };
       
    } 

    }
 
}
</script>



<style lang="less">
.title {
  text-align: center;
  background-color: green;
  height: 45px;
}
.title-span{
  font-size: 17px;
  top: -20px;
  color: white;
  position: absolute;
  margin-top: 30px;
  right: 160px;
}
.back {
  position: absolute;
  margin-top: -30px;
  left: 10px;
}
.footer-text {
  background-color: green;
}


</style>